<!--长效养护详情-->
<template>
	<page-meta :page-font-size="baseFontSize + 'rpx'" :root-font-size="baseFontSize + 'rpx'"></page-meta>
	<view class="u-page flex flex-direction">
		<view class="yh-base-info">
			<view class="name">{{ projectName }}</view>
			<view>{{ facilityName }}-{{ compName }}</view>
			<view>长效类型：{{ longTypeName }}</view>
			<view>养护周期：{{ frequencyValue }}</view>
		</view>
		<z-paging
			ref="paging"
			v-model="dataList"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
			:refresher-status.sync="refresherStatus"
			:auto-full-height="false"
			@query="getDetail"
			height="500px"
			:paging-style="{ 'margin-top': '20rem' }"
		>
			<view class="list" v-for="(item, index) in dataList" :key="item.longReportId">
				<view class="yh-item">
					<view class="yh-item-hd date flex align-center justify-between" @click="handleShow(item)">
						<view>{{ timeTranfer(item.updateTime) }}</view>
						<view class="icon">{{ item.isShow ? '+' : '-' }}</view>
					</view>
					<view class="yh-item-bd" v-if="!item.isShow">
						<!-- <view class="time">{{ item.endDate }}</view> -->
						<view class="base-info">
							<view>巡查人：{{ item.taskUserNickname }}</view>
							<view>巡查内容：{{ item.reportContent ? item.reportContent : '暂无内容' }}</view>
							<view class="imgbox" v-if="item.images && item.images.length">
								<image
									style="width: 120upx; height: 120upx"
									:src="imgSrc"
									v-for="(imgSrc, imgIndex) in item.images"
									@click="previewImage(item.images, imgIndex)"
									:key="imgIndex"
								></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<view class="page-footer"><button @tap="goToReportChang()" class="save-btn cu-btn block bg-blue lg">任务上报</button></view>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { getChangXiaoListApi } from '@/api/system/changxiao.js';
import moment from 'moment';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			list: 20,
			detailId: '',
			projectName: '',
			facilityName: '',
			compName: '',
			frequencyValue: '',
			longTypeName: '',
			dataList: [],
			refresherStatus: 0
		};
	},
	computed: {
		baseFontSize() {
			return this.$store.getters.fontSize;
		}
	},
	onLoad(e) {
		console.log(e);
		if (e && e.id) {
			this.detailId = e.id;
			this.projectName = e.projectName;
			this.facilityName = e.facilityName;
			this.compName = e.compName;
			this.placeName = e.placeName;
			this.componentId = e.componentId;
			this.longTypeName = e.longTypeName;
			this.frequencyValue = e.frequencyValue;
			//   this.getDetail()
		}
	},
	onShow() {
		this.$refs.paging.reload();
	},
	methods: {
		previewImage(photoImg, index) {
			uni.previewImage({
				current: index,
				urls: photoImg
			});
		},
		handleShow(selectItem) {
			this.dataList = this.dataList.map(item => {
				if (selectItem.longReportId === item.longReportId) {
					item.isShow = !item.isShow;
				}
				return {
					...item
				};
			});
		},
		timeTranfer(date) {
			return moment(date).format('YYYY-MM-DD HH:mm:ss');
		},
		goToReportChang(item) {
			this.$tab.navigateTo(
				`/pages/addForm/changxiaoyanghu?id=${this.detailId}&projectName=${this.projectName}&facilityName=${this.facilityName}&compName=${this.compName}&componentId=${
					this.componentId
				}&placeName=${this.placeName}`
			);
		},
		getDetail() {
			getChangXiaoListApi({
				taskId: this.detailId
			})
				.then(res => {
					this.$refs.paging.complete(res.data.list);
				})
				.catch(res => {
					this.$refs.paging.complete(false);
				});
		},

		navTo(path) {
			this.$tab.navigateTo(path);
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
.u-page {
	height: 100vh;
	background: #fff;
}
.yh-base-info {
	line-height: 4rem;
	font-size: 2.4rem;
	color: #999;
	padding: 24upx 32upx;
	.name {
		font-size: 3.2rem;
		line-height: 4.4rem;
		font-weight: 600;
		color: #333;
		margin-bottom: 20upx;
	}
}
.main {
	min-height: 0;
	overflow: auto;
}
.yh-item {
	line-height: 4.4rem;
	font-size: 2.4rem;
	padding-bottom: 20upx;
	.icon {
		width: 2rem;
		font-size: 3.4rem;
		color: #597ef7;
	}
	.time {
		color: #333;
		padding: 28upx 34upx 20upx;
	}
	.base-info {
		padding-left: 36upx;

		color: #999;
		view + view {
			margin-top: 8upx;
		}
		.imgbox {
			display: flex;
			flex-wrap: wrap;
			grid-gap: 40upx;
			gap: 40upx;
		}
	}
}
.page-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1;
}
</style>
